<!--
  固钉

  props：
    top number|string 距离屏幕上边距离
    bottom number|string 距离屏幕下边距离，top不填时以bottom参数为准，如果bottom也不传则top为0。
    left number|string 距离屏幕左边距离
    right number|string 距离屏幕右边距离，与bottom规则一致。
    zIndex number 层级

  slot: 
    content 内容 替换显示主体内容
-->
<template>
  <div class="fixed-wrapper" :style="fixedWraperStyle" @click="$emit('click')">
    <slot name="content">
      <div class="default-content">
        <f7-icon f7="plus"></f7-icon>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: "qm-fixed-nail",
  props: {
    top: [Number, String],
    left: [Number, String],
    bottom: [Number, String],
    right: [Number, String],
    zIndex: {
      type: Number,
      default: 1
    }
  },
  computed: {
    fixedWraperStyle() {
      let { zIndex, top, left, bottom, right } = this;
      typeof top === "number" && (top += "px");
      typeof bottom === "number" && (bottom += "px");
      typeof left === "number" && (left += "px");
      typeof right === "number" && (right += "px");

      ["", undefined, null].includes(top) && ["", undefined, null].includes(bottom) && (top = "0px");
      ["", undefined, null].includes(left) && ["", undefined, null].includes(right) && (left = "0px");
      let result = { zIndex, top, left, bottom, right };
      return result;
    }
  }
}
</script>

<style lang="less" scoped>
.fixed-wrapper {
  position: fixed;
  .default-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100px * var(--ratio));
    height: calc(100px * var(--ratio));
    font-size: calc(44px * var(--ratio));
    color: #fff;
    background: linear-gradient(144deg, #52A7EE 0%, #527BEE 100%);
    border-radius: 50%;
    box-shadow: 0 calc(6px * var(--ratio)) calc(10px * var(--ratio)) 0 rgba(5, 24, 66, 0.2);
  }
}
</style>
